<template>
  <div>
    <el-table
      :header-cell-style="{ background: '#f5f6f6' }"
      :data="formPerms"
      border
      style="width: 100%"
    >
      <el-table-column prop="title" show-overflow-tooltip label="表单字段">
        <template #default="scope">
          <span v-if="scope.row.require" style="color: #c75450"> * </span>
          <span>{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="readOnly" label="查看" width="80" align="left">
        <template #header>
          <el-checkbox
              :indeterminate="readIndeterminate"
              v-model="readAll"
              @change="(val) => checkAll(val, 'read')"
          >查看</el-checkbox
          >
        </template>
        <template #default="{row}">
          <el-checkbox
              @change="checkChange($event, row, 'read')"
              v-model="row.read"
          ></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column prop="editable" label="编辑" width="90" align="left">
        <template #header>
          <el-checkbox
              :indeterminate="editIndeterminate"
              v-model="editAll"
              @change="(val) => checkAll(val, 'edit')"
          >编辑</el-checkbox>
        </template>
        <template #default="{row}">
          <el-checkbox
              @change="checkChange($event, row, 'edit')"
              v-model="row.edit"
          ></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column prop="hide" label="必填" width="80" align="left">
        <template #header>
          <el-checkbox
              :indeterminate="requireIndeterminate"
              v-model="requireAll"
              @change="(val) => checkAll(val, 'require')"
          >必填</el-checkbox>
        </template>
        <template #default="{row}">
          <el-checkbox
              @change="checkChange($event, row, 'require')"
              v-model="row.require"
          ></el-checkbox>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {useFlowStore} from "@/store/modules/flow.js";
const flowStore = useFlowStore()

export default {
  name: "FormAuthorityConfig",
  components: {},
  data() {
    return {
      tableData: [],
      isIndeterminate: false,
      permSelect: "",
      readAll: false,
      readIndeterminate: false,
      editAll: false,
      editIndeterminate: false,
      requireAll: false,
      requireIndeterminate: false,
      checkStatus: {
        readOnly: true,
        editable: false,
        hide: false,
      },
    };
  },
  created() {
    this.formPermsLoad();
  },
  computed: {
    formData() {
      return flowStore.design.formItems;
    },
    formPerms() {
      console.log(flowStore.selectedNode.props)
      return flowStore.selectedNode.props.formPerms;
    },
  },
  methods: {
    formPermsLoad() {
      let perms = flowStore.selectedNode.props.formPerms;
      /*{
        "id": "orgId",
        "type": "input",
        "title": "单位",
        "props": {},
        "read": true,
        "require": false,
        "edit": false,
        "value": ""
      }*/
      this.formData.forEach((form) => {
        let isLoad = false;
        for (let i in perms) {
          if (perms[i].id === form.id) {
            perms[i].title = form.title;
            isLoad = true;
            break;
          }
        }
        if (!isLoad) {
          perms.push({
            id: form.id,
            type: form.type,
            title: form.title,
            props: form.props,
            read: form.read,
            require: form.require,
            edit: form.edit
          });
        }
      });
      if (perms.length > 0) {
        this.readAll = this.checkListStatus("read");
        this.editAll = this.checkListStatus("edit");
        this.requireAll = this.checkListStatus("require");
      }
    },
    checkAll(val, flag) {
      this.formPerms.forEach(item => {
        item[flag] = val;
        this.checkLinkage(val, flag, item);
      });
      this[flag + "Indeterminate"] = false;
    },
    //三种checkbox之间的联动效果
    checkLinkage(val, flag, item) {
      if (!val) {
        //取消选中
        this[flag + "All"] = false;
        if (flag === "read") {
          item.edit = false;
          item.require = false;
          this.editAll = false;
          this.requireAll = false;
          this.editAll = this.checkListStatus("edit");
          this.requireAll = this.checkListStatus("require");
        }
        if (flag === "edit") {
          item.require = false;
          this.requireAll = false;
          this.requireAll = this.checkListStatus("require");
        }
      }
      if (val) {
        if (flag ==="require") {
          item.edit = true;
          item.read = true;
          this.editAll = true;
          this.readAll = true;
          this.readAll = this.checkListStatus("read");
          this.editAll = this.checkListStatus("edit");
        }
        if (flag == "edit") {
          item.read = true;
          this.readAll = true;
          this.readAll = this.checkListStatus("read");
        }
        this[flag + "All"] = this.checkListStatus(flag);
      }
    },
    //判断是否list每一小项是否全是选中状态
    checkListStatus(prop) {
      let flag = true;
      this.formPerms.forEach(item => {
        if (!item[prop]) {
          flag = false;
        }
      });
      return flag;
    },
    checkChange(val, item, flag) {
      this.checkLinkage(val, flag, item);
    },
  }
};
</script>

<style lang="scss" scoped>

</style>
